import eventBus from '@/eventBus';
import { debounce } from '@/utils';
import defaultGif from '@/assets/default.gif';

// 待处理图片数组
let imgs = [];

// 调用后设置合适的图片
function setImage(img) {
  // 先将图片设为加载中
  img.dom.src = defaultGif;
  const clientHeight = document.documentElement.clientHeight;
  const rect = img.dom.getBoundingClientRect();
  const height = rect.height || 150; // 最小高度
  // 图片是否在视口范围内
  if (rect.top >= -height && rect.top <= clientHeight) {
    // 在视口范围内

    const tempImg = new Image();
    // 图片加载完成后，更换图片的src
    tempImg.onload = () => {
      img.dom.src = img.src;
    };
    tempImg.src = img.src;

    // img.dom.src = img.src; // 直接修改兼容性好一些
    // 移出待处理数组
    imgs = imgs.filter((i) => i !== img);
  }
}

function handleScroll() {
  for (const img of imgs) {
    // 处理单张图片
    setImage(img);
  }
}

eventBus.$on('mainScroll', debounce(handleScroll, 50));

export default {
  // 被绑定元素插入父节点
  inserted(el, bindings) {
    const img = {
      dom: el,
      src: bindings.value
    };
    imgs.push(img);
    // 立即处理
    setImage(img);
  },
  unbind(el) {
    imgs = imgs.filter((img) => img.dom !== el);
  }
};
